{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}
{% block head %}
<title>{{sysSettings.siteName}} - Search</title>

{% endblock %}

{% block body %}
<div class="container-fluid p-2" id="index-title-container">
    <div class="row m-2">
        <div class="index-video-title"><b>Search</b></div>
    </div>
</div>

{% if streamList != [] %}
<div class="container-fluid p-2" id="index-live-container">
    <div class="row mx-2">
        <div id="streamList" class="col-lg col-xs-12 col-sm-12">
            <div class="row">
                <div class="col-12 col-md-10 col-lg-11">
                    <div class="index-video-title"><b>Live Now</b></div>
                </div>
                <div class="col-12 col-md-2 col-lg-1">
                    <span class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-sort"></i> Sort
                        </button>
                        <div class="dropdown-menu shadow" aria-labelledby="dropdownMenuButton">
                            <span class="sort dropdown-item" data-sort="name">Sort by Name</span>
                            <span class="sort dropdown-item" data-sort="upvotes">Sort by Upvotes</span>
                            <span class="sort dropdown-item" data-sort="views">Sort by Views</span>
                            <span class="sort dropdown-item" data-sort="liveviews">Sort by Live Viewers</span>
                            <span class="sort dropdown-item" data-sort="topic">Sort by Topic</span>
                        </div>
                    </span>
                </div>
            </div>
            <ul class="itemList list d-flex flex-wrap justify-content-between">
                {% for stream in streamList %}
                <li class="video-card bg-dark mx-4" style="max-width: 45rem;">
                    <div class="row no-gutters">
                        <div class="video-card-header">
                            <a href="/view/{{stream.channel.channelLoc}}/">
                                <img class="shadow gif lazy" {% if stream.channel.protected and sysSettings.protectionEnabled } src="/static/img/video-locked.jpg" onerror="this.src='/static/img/video-locked.jpg';" {% else %} src="/static/img/video-placeholder.jpg"
                                    onerror="this.src='/static/img/video-placeholder.jpg';" {% endif %} width="100%" data-src="/stream-thumb/{{stream.channel.channelLoc}}.png"></a>
                        </div>
                        <div class="video-card-body ml-3">
                            <b><i class="px-2 fas fa-tv"></i></b><a href="/view/{{stream.channel.channelLoc}}/"><span class="video-title name"><b>{{stream.streamName|limit_title}}</b></span></a><br />
                            <b><i class="px-2 fas fa-podcast "></i></b><a href="/channel/{{stream.channel.id}}/"> {{stream.channel.channelName}}</a>
                            <span class="float-right"><span class="ml-4 px-2 badge badge-danger">Live</span>{% if stream.channel.protected and sysSettings.protectionEnabled %}<span class="badge badge-info"><i class="fas fa-user-lock"></i> Protected</span>{% endif %}</span><br />
                            <b><i class="px-2 fas fa-hashtag"></i></b><a href="/topic/{{stream.topic}}/"><span class="topic"> {{stream.topic|get_topicName}}</span></a><br>
                            <span class="px-2 flex-fill upvotes"><i class="fas fa-thumbs-up"></i> {{stream.id|get_Stream_Upvotes}}</span>
                            <span class="px-2 flex-fill liveviews"><i class="fas fa-eye"></i> {{stream.currentViewers}}</span>
                            <span class="px-2 flex-fill views"><i class="fas fa-users"></i> {{stream.totalViewers}}</span>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
<hr>
{% endif %}

{% if streamerList != [] %}
<div class="container-fluid p-2" id="index-streamer-container">
    <div class="row mx-2">
        <div id="streamerList" class="col-lg col-xs-12 col-sm-12">
            <div class="row">
                <div class="col-12 col-md-10 col-lg-11">
                    <div class="index-live-title"><b>Streamers</b></div>
                </div>
                <div class="col-12 col-md-2 col-lg-1">
                    <span class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-sort"></i> Sort
                        </button>
                        <div class="dropdown-menu shadow" aria-labelledby="dropdownMenuButton">
                            <span class="sort dropdown-item" data-sort="name">Sort by Username</span>
                        </div>
                    </span>
                </div>
            </div>
            <ul class="itemList d-flex flex-wrap justify-content-start">
                {% for streamer in streamerList %}
                    <li class="streamerCard py-1 pr-2">
                        <a href="/streamers/{{streamer.id}}/">
                        <img class="shadow lazy zoom" src="/images/{{streamer.pictureLocation}}" onerror="this.src='/static/img/user2.png';">
                        <div class="card-data">
                            <div class="card-cut-text name"><b>{{streamer.username}}</b></div>
                        </div>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endif %}

{% if topicList != [] %}
<div class="container-fluid p-2" id="index-topics-container">
    <div class="row mx-2">
        <div id="topicsList" class="col-lg col-xs-12 col-sm-12">
            <div class="row">
                <div class="col-12 col-md-10 col-lg-11">
                    <div class="index-live-title"><b>Topics</b></div>
                </div>
                <div class="col-12 col-md-2 col-lg-1">
                    <span class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-sort"></i> Sort
                        </button>
                        <div class="dropdown-menu shadow" aria-labelledby="dropdownMenuButton">
                            <span class="sort dropdown-item" data-sort="name">Sort by Name</span>
                        </div>
                    </span>
                </div>
            </div>
            <ul class="itemList d-flex flex-wrap justify-content-start">
                {% for topic in topicList %}
                    <li class="displayCard py-1 pr-2">
                        <a href="/topic/{{topic.id}}/">
                        <img class="shadow lazy zoom" src="/images/{{topic.iconClass}}" onerror="this.src='/static/img/video-placeholder.jpg';">
                        <div class="card-data">
                            <div class="card-cut-text name"><b>{{topic.name}}</b></div>
                        </div>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endif %}

{% if channelList != [] %}
<div class="container-fluid p-2" id="index-channels-container">
    <div class="row mx-2">
        <div id="channelList" class="col-lg col-xs-12 col-sm-12">
            <div class="row">
                <div class="col-12 col-md-10 col-lg-11">
                    <div class="index-live-title"><b>Channels</b></div>
                </div>
                <div class="col-12 col-md-2 col-lg-1">
                    <span class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-sort"></i> Sort
                        </button>
                        <div class="dropdown-menu shadow" aria-labelledby="dropdownMenuButton">
                            <span class="sort dropdown-item" data-sort="name">Sort by Name</span>
                            <span class="sort dropdown-item" data-sort="subs">Sort by Subscriptions</span>
                            <span class="sort dropdown-item" data-sort="views">Sort by Views</span>
                            <span class="sort dropdown-item" data-sort="topic">Sort by Topic</span>
                        </div>
                    </span>
                </div>
            </div>
            <ul class="itemList list d-flex flex-wrap justify-content-start">
                {% for channel in channelList %}
                <li class="channel-card bg-dark mx-4" style="max-width: 20rem;">
                    <div class="channel-card-header">
                        <a href="/channel/{{channel.id}}/">
                            <img class="shadow lazy" height="180" width="320" src="/images/{{channel.imageLocation}}" onerror="this.src='/static/img/video-placeholder.jpg';"></a>
                    </div>
                    <div class="channel-card-body">
                        <i class="fas fa-podcast mr-2"></i><a href="/channel/{{channel.id}}/"><span class="video-title name"><b> {{channel.channelName}}</b></span></a>
                        <span class="float-right">
                            {% if channel.stream|length > 0 %}
                            <span class="badge badge-danger">Live</span>
                            {% else %}
                            <span class="badge badge-secondary">Offline</span>
                            {% endif %}
                        </span><br />
                        <i class="fas fa-user mr-2"></i><a href="/streamers/{{channel.owningUser}}"> {{channel.owningUser|get_userName}}</a>
                        {% if channel.protected and sysSettings.protectionEnabled %}<span class="float-right"><span class="badge badge-info"><i class="fas fa-user-lock"></i> Protected</span>{% endif %}</span><br />
                        <i class="fas fa-hashtag mr-2"></i> <a href="/topic/{{channel.topic}}/"><span class="topic">{{channel.topic|get_topicName}}</span></a>
                        <span class="float-right">
                            <i class="fas fa-users mr-2"></i> <span class="views">{{channel.views}}</span>
                            <i class="fas fa-star mx-2"></i> <span class="subs">{{channel.subscriptions|length}}</span>
                        </span>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endif %}

{% if videoList != [] %}
<div class="container-fluid p-2" id="index-videos-container">
    <div class="row mx-2">
        <div id="recordedVideoList" class="col-lg col-xs-12 col-sm-12">
            <div class="row">
                <div class="col-12 col-md-10 col-lg-11">
                    <div class="index-video-title"><b>Videos</b></div>
                </div>
                <div class="col-12 col-md-2 col-lg-1">
                    <span class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-sort"></i> Sort
                        </button>
                        <div class="dropdown-menu shadow" aria-labelledby="dropdownMenuButton">
                            <span class="sort dropdown-item" data-sort="name">Sort by Name</span>
                            <span class="sort dropdown-item" data-sort="upvotes">Sort by Upvotes</span>
                            <span class="sort dropdown-item" data-sort="views">Sort by Views</span>
                            <span class="sort dropdown-item" data-sort="length">Sort by Length</span>
                            <span class="sort dropdown-item" data-sort="date">Sort by Date</span>
                        </div>
                    </span>
                </div>
            </div>
            <ul class="itemList list d-flex flex-wrap justify-content-start">
                {% for video in videoList %}
                <li class="video-card bg-dark mx-4" style="max-width: 20rem;">
                    <div class="video-card-header">
                        <a href="/play/{{video.id}}">
                            <img class="shadow {% if video.gifLocation != None %}gif{% endif %} lazy" {% if video.channel.protected and sysSettings.protectionEnabled %} src="/static/img/video-locked.jpg" onerror="this.src='/static/img/video-locked.jpg';" {% else %} src="/static/img/video-placeholder.jpg"
                                onerror="this.src='/static/img/video-placeholder.jpg';" {% endif %} width="100%" data-src="/videos/{{video.thumbnailLocation}}">
                        </a>
                    </div>
                    <div class="video-card-body">
                        <i class="fas fa-tv mr-2"></i><a href="/play/{{video.id}}"><span class="video-title name"><b> {{video.channelName|limit_title}}</b></span></a><br />
                        {% if video.channel.protected and sysSettings.protectionEnabled %}<span class="float-right"><span class="badge badge-info"><i class="fas fa-user-lock"></i> Protected</span></span>{% endif %}<br />
                        <i class="fas fa-podcast mr-2"></i><a href="/channel/{{video.channel.id}}/"> {{video.channel.channelName}}</a>
                        <span class="float-right date"><i class="fas fa-calendar-alt mr-2"></i> {{video.videoDate|normalize_date}}</span><br />
                        <i class="fas fa-user mr-2"></i><a href="/streamers/{{video.owningUser}}"> {{video.owningUser|get_userName}}</a>
                        <span class="float-right"><i class="fas fa-hashtag mr-2"></i><a href="/topic/{{video.topic}}/"> <span class="topic"> {{video.topic|get_topicName}}</span></a></span><br />
                        <i class="fas fa-thumbs-up mr-2"></i> <span class="upvotes">{{video.id|get_Video_Upvotes}}</span>
                        <i class="fas fa-eye mx-2"></i> <span class="views">{{video.views}}</span>
                        <i class="fas fa-comments mx-2"></i> {{video.id|get_Video_Comments}}
                        <span class="float-right length"><i class="fas fa-clock mr-2"></i> {{video.length|hms_format}}</span>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endif %}

{% if clipList != [] %}
<div class="container-fluid p-2" id="index-clips-container">
    <div class="row mx-2">
        <div id="clipList" class="col-lg col-xs-12 col-sm-12">
           <div class="row">
                <div class="col-12 col-md-10 col-lg-11">
                    <div class="index-video-title"><b>Clips</b></div>
                </div>
                <div class="col-12 col-md-2 col-lg-1">
                    <span class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-sort"></i> Sort
                        </button>
                        <div class="dropdown-menu shadow" aria-labelledby="dropdownMenuButton">
                            <span class="sort dropdown-item" data-sort="name">Sort by Name</span>
                            <span class="sort dropdown-item" data-sort="upvotes">Sort by Upvotes</span>
                            <span class="sort dropdown-item" data-sort="views">Sort by Views</span>
                            <span class="sort dropdown-item" data-sort="length">Sort by Length</span>
                            <span class="sort dropdown-item" data-sort="date">Sort by Date</span>
                        </div>
                    </span>
                </div>
            </div>
            <ul class="itemList list d-flex flex-wrap justify-content-start">
                {% for clip in clipList %}
                <li class="video-card bg-dark mx-4" style="max-width: 20rem;">
                    <div class="video-card-header">
                        <a href="/clip/{{clip.id}}">
                            <img class="shadow {% if clip.gifLocation != None %}gif{% endif %} lazy" src="/static/img/video-placeholder.jpg" width="100%" data-src="/videos/{{clip.thumbnailLocation}}" onerror="this.src='/static/img/video-placeholder.jpg';">
                        </a>
                    </div>
                    <div class="video-card-body">
                        <i class="fas fa-tv mr-2"></i><a href="/clip/{{clip.id}}"><span class="video-title name"><b> {{clip.clipName|limit_title}}</b></span></a><br />
                        <span class="float-right"><span class="badge badge-secondary ml-2"><i class="fas fa-user-lock"></i> Clip</span></span>{% if clip.recordedVideo.channel.protected and sysSettings.protectionEnabled %}<span class="float-right"><span class="badge badge-info"><i
                                    class="fas fa-user-lock"></i> Protected</span></span>{% endif %}<br />
                        <i class="fas fa-podcast mr-2"></i><a href="/channel/{{clip.recordedVideo.channel.id}}/"> {{clip.recordedVideo.channel.channelName}}</a>
                        <span class="float-right date"><i class="fas fa-calendar-alt mr-2"></i> {{clip.recordedVideo.videoDate|normalize_date}}</span><br />
                        <i class="fas fa-user mr-2"></i><a href="/streamers/{{clip.recordedVideo.owningUser}}"> {{clip.recordedVideo.owningUser|get_userName}}</a>
                        <span class="float-right"><i class="fas fa-hashtag mr-2"></i><a href="/topic/{{clip.recordedVideo.topic}}/"> {{clip.recordedVideo.channel.topic|get_topicName}}</a></span><br />
                        <i class="fas fa-thumbs-up mr-2"></i><span class="upvotes"> {{clip.id|get_Clip_Upvotes}}</span>
                        <i class="fas fa-eye mx-2"></i><span class="views"> {{clip.views}}</span>
                        <span class="float-right length"><i class="fas fa-clock mr-2"></i> {{clip.length|hms_format}}</span>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endif %}

{% if clipList == [] and channelList == [] and topicList == [] and streamerList == [] and videoList == [] and clipList == [] %}
<div class="container-fluid p-2" id="index-null-container">
    <div class="row m-2">
        <div class="col">
            <p>Nothing to see here.</p>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<script>
    streamerListOptions = {
        valueNames: ['name']
    };

    topicListOptions = {
        valueNames: ['name']
    };

    channelListOptions = {
        valueNames: ['name', 'subs', "views", "topic"]
    };

    streamListOptions = {
        valueNames: ['name', 'upvotes', 'views', 'liveviews', 'topic']
    };

    videoListOptions = {
        valueNames: ['name', 'upvotes', "views", "length", "date"]
    };

    clipListOptions = {
        valueNames: ['name', 'upvotes', "views", "length", "date"]
    };

    var streamerList = new List('streamerList', streamerListOptions);
    var topicList = new List('topicsList', topicListOptions);
    var channelList = new List('channelList', channelListOptions);
    var streamList = new List('streamList', streamListOptions);
    var recordedVideosList = new List('recordedVideoList', videoListOptions);
    var clipList = new List('clipList', clipListOptions);
</script>
{% endblock %}